<!-- 首页头部静态区域组件 -->
<template>
	<div class="position">
		<i class="iconfont icon-location"></i>
		<span class="ellipsis">深圳市南山区大冲商务中心</span>
		<i class="iconfont icon-lingdang"></i>
	</div>

	<van-search v-model="searchVal" placeholder="请输入搜索关键词" />
	<!-- <div class="search flex">
		<i class="iconfont icon-sousuo"></i>
		<input type="text" class="flex_item" placeholder="请输入" />
	</div> -->
	<div class="banner">
		<van-swipe indicator-color="white">
			<van-swipe-item>
				<van-image class="img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg" />
			</van-swipe-item>
			<van-swipe-item>
				<van-image class="img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg" />
			</van-swipe-item>
			<van-swipe-item>
				<van-image class="img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg" />
			</van-swipe-item>
			<van-swipe-item>
				<van-image class="img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg" />
			</van-swipe-item>
		</van-swipe>
	</div>
	<ul class="icons flex">
		<li class="item" v-for="(item, index) in list" :key="index">
			<van-image class="item_img" :src="`http://www.dell-lee.com/imgs/vue3/${item.imgname}.png`" />
			<p class="item_desc">{{ item.desc }}</p>
		</li>
	</ul>
	<div class="gap"></div>
</template>

<script>
import _axios from '@/api/axios.js';
import { ref, onMounted } from 'vue';
export default {
	name: 'StaticPart',
	setup () {
		const searchVal = ref('');
		const list = ref([]);
		const getStaticPart = () => {
			_axios.get('api/getStaticPart').then(res => {
				list.value = res.data;
			}).catch(err => {
				console.log(err);
			});
		};

		onMounted(() => {
			getStaticPart();
		})
		return { searchVal, list };
	},
};
</script>

<style lang="scss" scoped>
.van-swipe-item {
	color: #fff;
}
.position {
	padding: 0.16rem 0;
	line-height: 0.22rem;
	font-size: 0.16rem;
	.ellipsis {
		display: inline-block;
		width: 76%;
		margin-left: 0.1rem;
	}
	.icon-location {
		font-size: 0.16rem;
		float: left;
		position: relative;
		top: 0.02rem;
	}
	.icon-lingdang {
		font-size: 0.22rem;
		float: right;
	}
}
.search {
	line-height: 0.32rem;
	background-color: #eee;
	color: #b7b7b7;
	border-radius: 0.16rem;
	overflow: hidden;
	input {
		border: none;
		line-height: 0.32rem;
		font-size: 0.14rem;
		background-color: #eee;
		padding: 0 0.1rem;
	}
	.icon-sousuo {
		font-size: 0.16rem;
		color: #333;
		padding-left: 0.1rem;
	}
}
.banner {
	height: 0;
	overflow: hidden;
	padding-bottom: 25.4%; // 图片宽高比是25.4%，撑开图片加载空间 防止外部抖动
	margin: 0.16rem 0;
	.img {
		width: 100%;
	}
}
.icons {
	flex-wrap: wrap;
	.item {
		width: 20%;
		.item_img {
			display: block;
			width: 0.4rem;
			height: 0.4rem;
			margin: 0 auto;
		}
		.item_desc {
			text-align: center;
			margin: 0.06rem 0 0.16rem;
			color: #333;
		}
	}
}
.gap {
	height: 0.1rem;
	background-color: #eee;
}
</style>
